<template>
	<view class="all">
		<view class="status_bar"></view>
		<myTopBar title="安全监管" url='../../static/index/img_dr.png'></myTopBar>
		<view class="center">
			<view class="center-left">
				<view @click="toPage(index)" :class="selectIndex===index?'center_left_item_current':'center_left_item'"
					v-for="item,index in leftTitle" :key='index'>{{item.name}}</view>
			</view>

			<view class="center-right-">
				<view class="center-right">
					<view class="center-right-inputSelect">
						<text>日期：</text>
						<input @click="visible=true,clickFlag=true" disabled type="text" v-model="data" />
						<view class="center-right-inputSelect-icon" @click="visible=false">
							<u-icon color='#58B6E5' :name='visible?"arrow-up-fill":"arrow-down-fill"'></u-icon>
						</view>
					</view>
					<view :style="!changeFlag?'background-color: #58B6E5':'background-color: #414ce5'" @click="search" class="center-right-btn">查询</view>
				</view>
				<picker-view @click="visible=false" v-if="visible" :value="value" @change="bindChange"
					class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
					</picker-view-column>
					<picker-view-column>
						<view v-show="selectIndex!=1" class="item" v-for="(item,index) in days" :key="index">
							{{index===0?'':item+'日'}}
						</view>
					</picker-view-column>
				</picker-view>
				
				
				<view :class="selectIndex===2?'swiper_table':'swiper_table-other'">
					<!-- 图片轮播 -->
					<u-swiper v-if="list.length!=0 && selectIndex===2" border-radius='0' :list="list" mode="none">
					</u-swiper>
					<u-empty class="u-empty1" icon-size='50' img-width='150' font-size="15"
						v-else-if="list.length===0 && selectIndex===2" text="暂无图片" mode="list"></u-empty>
				
					<view :class="selectIndex===2?'center-right-table-last': 'center-right-table'">
						<scroll-view scroll-y="true">
							<u-table>
								<u-tr :class="selectIndex===2?'u-tr-title-last':'u-tr-title'">
									<u-th v-for="(item,index) in tableTitlelist" :key='index' class="u-th">{{item}}</u-th>
								</u-tr>
				
								<!-- 重要危险源 -->
								<u-tr v-if="selectIndex===0"
									:style="index1%2==0?'background-color: #D2DDF5;':'background-color: #EAEFFA;'"
									:class="index1===0?'u-tr-content':'u-tr'" v-for="(item1,index1) in tableDataList">
									<u-td>{{item1.source}}</u-td>
									<u-td>
										<image @click="item1.qualified==='0'?showDescrib(item1,index1):null"
											:src="item1.qualified==='0'?url1:url2" mode="widthFix" style="width: 15rpx;">
										</image>
									</u-td>
									<u-td v-for="(items,indexs) in item1.dangerParameterList" :key="`danger-${indexs}`">
										<image @click="items.qualified==='0'?showDescrib(items,indexs):null"
											:src="judgmentIcon(item1, index1, items, indexs)" mode="widthFix"
											style="width: 15rpx;"></image>
									</u-td>
								</u-tr>
				
								<!-- 安全检查 -->
								<u-tr v-if="selectIndex===1"
									:style="index1%2==0?'background-color: #D2DDF5;':'background-color: #EAEFFA;'"
									:class="index1===0?'u-tr-content':'u-tr'" v-for="(item1,index1) in tableDataList">
									<u-td>{{item1.times[0]}}</u-td>
									<u-td>{{item1.safety.name}}</u-td>
									<u-td>{{item1.situation}}</u-td>
									<u-td>{{item1.needReform}}</u-td>
									<u-td>{{item1.noReform}}</u-td>
									<u-td>{{item1.supervisor}}</u-td>
								</u-tr>
				
								<!-- 工作票-->
								<u-tr v-if="selectIndex===2"
									:style="index1%2==0?'background-color: #D2DDF5;':'background-color: #EAEFFA;'"
									:class="index1===0?'u-tr-content':'u-tr'" v-for="(item1,index1) in tableDataList">
									<u-td><text @click="toLeftTable(index1)">{{index1+1}}</text></u-td>
									<u-td>{{item1.banks}}</u-td>
									<u-td>{{item1.type}}</u-td>
									<u-td>{{item1.qualified==='0'?'否':'是'}}</u-td>
									<u-td>{{item1.checkDescribe}}</u-td>
								</u-tr>
				
								<u-empty icon-size='50' img-width='150' font-size="15" v-if="tableDataList.length===0"
									text="数据为空"></u-empty>
							</u-table>
						</scroll-view>
					</view>
				
				</view>
			</view>

			

			<!-- 点击红色按钮   弹出异常问题描述 -->
			<u-popup v-model="show" mode='center' width="200rpx" height="150rpx">
				<scroll-view scroll-y="true" class="cont">{{contentDescrib}}</scroll-view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import myTopBar from '../topNavigationBar/topNavigationBar'
	export default {
		components: {
			myTopBar
		},
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = ['']
			const day = date.getDate()
			for (let i = 2000; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}

			return {
				background: {
					backgroundColor: '#2169D3'
				},
				leftTitle: [{
					name: "重要危险源",
				}, {
					name: "安全检查",
				}, {
					name: "工作票检查",
				}],
				years,
				year,
				months,
				month,
				days,
				day,
				value: [9999, month - 1],
				visible: false,
				clickFlag: false,
				selectIndex: 0,
				tableDataList: [],
				show: false,
				/* 判断是否选择日期 */
				timeFlage: false,
				url1: '../../static/index/img_yx2.png',
				url2: '../../static/index/img_yx1.png',
				/* 重要危险源的 气体 温度 压力 判断数据 */
				flages: [],
				list: [],
				dailyIndex: -1,
				contentDescrib: '',
				changeFlag:false
			}
		},
		onLoad() {
			this.selectDangerSource()
		},
		computed: {
			data() {
				if (this.clickFlag) {
					if (this.selectIndex === 1) {
						return this.year + '年' + this.month + '月'
					}
					if (this.day === undefined || this.day === "") {
						return this.year + '年' + this.month + '月'
					}
					console.log(this.day);
					return this.year + '年' + this.month + '月' + this.day + '日'

				} else {
					return ''
				}
			},
			tableTitlelist() {
				if (this.selectIndex === 1) {
					return ['日期', '类型', '安全检查情况', '需整改项', '未整改', '监管员']
				} else if (this.selectIndex === 0) {
					return ['', '日常巡检', '危险因素1', '危险因素2', '危险因素3']
				} else if (this.selectIndex === 2) {
					return ['序号', '工作票号', '类别', '是否合格', '抽查描述']
				}
			}
		},
		methods: {
			judgmentIcon(item, index, items, indexs) {
				return Number(items.qualified) === 0 ? this.url1 : Number(items.qualified) === 1 ? this.url2 : ''
			},
			toBack() {
				uni.navigateTo({
					url: '../index/index'
				})
			},
			bindChange: function(e) {
				const val = e.detail.value
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
				this.day = this.days[val[2]]
				this.timeFlage = true
			},
			toPage(index) {
				this.tableDataList = []
				this.selectIndex = index
				if (this.selectIndex === 1) {
					this.selectSafety()
				} else if (this.selectIndex === 2) {
					this.selectTicket()
				}
			},
			/* 查询重要危险源 */
			async selectDangerSource() {
				this.tableDataList = []
				let day;

				if (this.month < 10) {
					if (this.day === undefined) {
						day = this.year + '-0' + this.month
					} else {
						if (this.day < 10) {
							day = this.year + '-0' + this.month + '-0' + this.day
						} else {
							day = this.year + '-0' + this.month + '-' + this.day
						}
					}
				} else {
					if (this.day === undefined) {
						day = this.year + '-' + this.month
					} else {
						if (this.day < 10) {
							day = this.year + '-' + this.month + '-0' + this.day
						} else {
							day = this.year + '-' + this.month + '-' + this.day
						}
					}

				}
				console.log(day);

				let params;
				if (this.day === undefined) {
					params = {
						month: day,
						type: 2
					}
				} else {
					params = {
						day: day,
						type: 1
					}
				}
				console.log(params);

				const res = await this.$u.api.selectDangerSource(params)
				if (!res.success) {
					return;
				}
				this.tableDataList = res.body.data.map(item => {
					console.log(item.dangerParameterList);
					if ( 3 - item.dangerParameterList.length !== 0) {
						let arr = ['1', '2', '3']
						item.dangerParameterList = item.dangerParameterList.map(items => {
							arr = arr.map(item1 => {
								if (item1 === items.type) {
									return ''
								} else {
									return item1
								}
							}).filter(value => value)
							return items
						})
						arr.forEach(value => {
							item.dangerParameterList.push({
								type: value
							})
						})
					}
					item.dangerParameterList = item.dangerParameterList.sort((a, b) => {
						return Number(a.type) - Number(b.type)
					})
					return item

				})
				this.tableDataList = res.body.data
				console.log(this.tableDataList);
			},
			/* 安全检查 */
			async selectSafety() {
				this.tableDataList = []
				let param;
				if (this.month < 10) {
					param = {
						month: this.year + "-0" + this.month
					}
				} else {
					param = {
						month: this.year + '-' + this.month
					}
				}
				const res = await this.$u.api.selectSafety(param)
				if (!res.success) {
					return;
				}
				res.body.data.list.map(item => {
					item.times = item.times.split(" ")
				})
				this.tableDataList = res.body.data.list
				console.log(this.tableDataList);

			},
			/* 工作票 */
			async selectTicket() {
				this.tableDataList = []
				this.list = []
				let day;
				if (this.month < 10) {
					if (this.day === undefined) {
						day = this.year + '-0' + this.month
					} else {
						if (this.day < 10) {
							day = this.year + '-0' + this.month + '-0' + this.day
						} else {
							day = this.year + '-0' + this.month + '-' + this.day
						}
					}

				} else {
					if (this.day === undefined) {
						day = this.year + '-' + this.month
					} else {
						if (this.day < 10) {
							day = this.year + '-' + this.month + '-0' + this.day
						} else {
							day = this.year + '-' + this.month + '-' + this.day
						}
					}

				}
				let params;
				if(this.day===undefined){
					params = {
						month: day,
						type:2
					}
				}else{
					params = {
						day: day,
						type:1
					}
				}
				console.log(params);
				
				const res = await this.$u.api.selectTicket(params)
				console.log(res);
				if (!res.success) {
					return;
				}
				this.tableDataList = res.body.data
				this.tableDataList.forEach(item => {
					item.imgs = item.imgs.split('|')
					item.imgs = item.imgs.map(item => this.$u.baseUrl + item)
				})
				this.list = this.tableDataList[0].imgs
				// console.log(this.tableDataList);

			},
			search() {
				this.changeFlag=true
				setTimeout(()=>{
					this.changeFlag=false
				},200)
				if (this.selectIndex === 0) {
					if (this.timeFlage) {
						this.selectDangerSource()
					} else {
						this.$u.toast("请选择日期后查询!")
					}
				} else if (this.selectIndex === 1) {
					this.selectSafety()
				} else {
					this.selectTicket()
				}

			},
			toLeftTable(i) {
				this.list = this.tableDataList[i].imgs
				console.log(this.list);
			},
			showDescrib(v, i) {
				console.log(v);
				this.contentDescrib = v.description
				this.show = true
			},
		}
	}
</script>

<style>
	page {
		background-color: #2169D3;
		overflow: hidden;
	}

	/* 手机系统 系统状态栏高度 */
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #2169D3;
	}

	.top {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.top-arrow {
		color: #FFFFFF;
		margin: 0 4rpx;
	}

	.top-left,
	.top-right {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 270rpx;
		height: 50rpx;
		background: url(../../static/index/img_dr.png) no-repeat;
		background-size: 100% 100%;
		font-size: 22rpx;
		color: #FFFFFF;
	}

	.top-right {
		width: 420rpx;
	}


	.center {
		display: flex;
		margin-top: 20rpx;
	}

	.center-left {
		margin-left: 20rpx;
	}

	.center_left_item,
	.center_left_item_current {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 130rpx;
		height: 45rpx;
		color: #FFFFFF;
		font-size: 20rpx;
		background: url(../../static/index/img_dr.png) no-repeat;
		background-size: 100% 100%;
		margin: 17rpx 17rpx 22rpx 17rpx;
	}

	.center_left_item_current {
		background: url(../../static/index/button_an.png) no-repeat;
		background-size: 100% 100%;
	}



	.center-right {
		display: flex;
		margin-top: 21rpx;
		margin-left: 4rpx;
	}

	.center-right-inputSelect {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #58B6E5;
		width: 180rpx;
		height: 30rpx;
		border: 2rpx solid #000000;
		font-size: 16rpx;
		color: #FFFFFF;
		margin-right: 5rpx;
	}

	.center-right-inputSelect input {
		width: 120rpx;
		border-bottom: 3rpx solid #FFFFFF;
		margin-top: 0rpx;
		font-size: 13rpx;
	}

	.center-right-inputSelect-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		right: 8rpx;
		width: 20rpx;
		height: 16rpx;
		background-color: #FFFFFF;
		border: 1rpx dashed #000000;
	}

	.center-right-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 85rpx;
		height: 30rpx;
		color: #FFFFFF;
		font-size: 16rpx;
		background-color: #58B6E5;
		border: 2rpx solid #000000;
		border-radius: 10rpx;
	}




	.picker-view {
		position: absolute;
		z-index: 999;
		width: 170rpx;
		height: 120rpx;
		margin-left: 24rpx;
		font-size: 14rpx;
		background-color: #ACC4E6;
		/* color: ; */
	}

	.item {
		/* height: 20px; */
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	/* 表格 */
	.u-tr-content {
		margin-top: 39rpx;
	}

	.center-right-table,
	.center-right-table-last {
		/* position: absolute;
		bottom: 20rpx;
		right: 30rpx; */
		width: 500rpx;
		/* height:200rpx; */
		/* margin-top: 20rpx; */
		background-color: #000000;
		margin-top: 25rpx;
	}

	.center-right-table-last {
		width: 350rpx;
	}

	.u-table {
		height: 180rpx !important;
		white-space: nowrap;
		/* margin-top: 10rpx; */

	}

	.u-tr-title,
	.u-tr-title-last {
		position: fixed;
		/* width: 70%; */
		width: 500rpx;
		margin-top: -2rpx;
		z-index: 99;
	}

	.u-tr-title-last {
		width: 350rpx;
	}

	.u-th,
	.u-td {
		font-size: 15rpx !important;
		border: 1rpx solid #FFFFFF !important;
		text-align: center !important;
		height: 40rpx !important;
		white-space: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
	}



	.u-th {
		background-color: #6096E6 !important;
		color: #FFFFFF !important;
	}

	.u-td {
		color: #034AB2 !important;
	}

	/* 轮播图 */
	.u-swiper-wrap {
		width: 180rpx;
		height: 180rpx;
/* margin-top: 20rpx; */
	}

	.u-empty1 {
		background-color: #FFFFFF !important;
		width: 180rpx;
		height: 180rpx;
		margin-top: 25rpx!important;
	}

	.cont {
		width: 160rpx;
		margin: 20rpx;
		height: 180rpx;
		font-size: 16rpx;
	}


	.swiper_table,
	.swiper_table-other {
		position: absolute;
		/* bottom: 20rpx; */
		margin-top: 30rpx;
		right: 20rpx;
		width: 550rpx;
		height: 180rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.swiper_table-other {
		right: 40rpx;
	}
</style>
